<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/jsp/common/common.jspf"%>
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>

		<!--Import materialize.css-->
		<link type="text/css" rel="stylesheet" href="${ctx}/static/css/materialize.min.css" media="screen,projection" />
		<!-- 导入补充样式 -->
		<link type="text/css" rel="stylesheet" href="${ctx}/static/css/supplement.css" />
		<!-- Material Design图标 -->
		<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

		<!--Let browser know website is optimized for mobile-->
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	</head>

	<body>
		<header>
			<nav>
				<div class="nav-wrapper">
					<div class="col s12" style="padding: 0 0.75em;">
						<a href="#" class="breadcrumb">菜单管理</a>
						<a href="#" class="breadcrumb">菜单维护</a>
					</div>
				</div>
			</nav>

			<div class="container"></div>
			<%@ include file="/jsp/nav.jsp" %>
		</header>

		<main>
			<div class="row">
                <div class="col s12 m10 110">
                    <div class="col s4">
                        <div class="card">
                            <table class="highlight centered">
                                <thead>
                                    <tr>
                                        <th data-field="roleName">角色列表</th>
                                    </tr>
                                </thead>

                                <tbody>
                                    <c:forEach items="${roles }" var="r" varStatus="status">
                                        <tr>
                                            <td style="cursor: pointer;" role-id="${r.id }">${r.name }</td>
                                        </tr>
                                    </c:forEach>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <div class="col s4">
                        <form class="col s12" method="post" action="addMember.action">
                            <div class="row" style="display: none;">
                                <input type="text" name="roleId" />
                            </div>
                            <ul class="collapsible" data-collapsible="accordion">
                                <li>
                                    <div class="collapsible-header">成员列表</div>
                                    <div>
                                        <c:forEach items="${employees}" var="e" varStatus="status">
                                            <p style="padding: 1rem; margin: 0;">
                                                <input type="checkbox" id="${e.username }${e.id}" name="members" value="${e.id}" />
                                                <label for="${e.username }${e.id}">${e.realName}</label>
                                            </p>
                                        </c:forEach>
                                    </div>
                                </li>
                            </ul>

                            <div class="row right">
                                <input class="btn" type="submit" value="提交" />
                                <a class="waves-effect waves-light btn" href="toRoleList.action">返回</a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
		</main>

		<script src="${ctx}/static/js/jquery-3.1.0.min.js"></script>
		<script src="${ctx}/static/js/materialize.min.js"></script>
		<script type="text/javascript">
            $(".highlight.centered tbody td").on("click", function() {
                var role_name = $(this).text();
                $("div.collapsible-header").text(role_name + "成员管理");
                
                //获取角色id
                var role_id = $(this).attr("role-id");
                //设置角色id
                $("input[name='roleId']").attr("value", role_id);
                
                $.ajax({
                    async: false,
                    url: "resultMemberJSON.action",
                    data: {
                        id: role_id
                    },
                    type: "POST",
                    dataType: "json",
                    success: function(menu) {
                        //清空选中状态
                        $("input[type='checkbox']").removeAttr("checked");
                        
                        $.each(menu, function(k, v) {
                            $("#" + v + k).attr("checked", "checked");
                        });
                    }
                });
            });
        </script>
	</body>

</html>